<template>
    <h1> 这是demo页</h1>
    <ul>
        <li>
            <router-link to="/hello">链接跳转helloworld页</router-link>
        </li>
        <li>
            <a @click="goTo('/hello')">点击事件跳转对应页面</a>
        </li>
    </ul>
    <h1>
        这是demo页 当前计数：{{ counterStore.counter }}，计数两倍为：{{
            counterStore.doubleCount
        }}  
    </h1>
    <div class="demo-link-box">
        <h1>Demo演示</h1>
        <ul class="demo-link">
            <li><router-link to="/hello">路由跳转helloworld页</router-link></li>
            <li><router-link to="/demo/mockDemo">mockjs案例</router-link></li>
            <li><router-link to="/demo/mockApiDemo">前端模拟后端接口</router-link></li>
            <li><router-link to="/demo/sassDemo">sass 使用演示</router-link></li>
        </ul>
    </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import { useCounterStore } from '../../store/modules/counterStore'
const counterStore = useCounterStore()
const router = useRouter()

//点击事件跳转对应页面
function goTo(path: string) {
    router.push(path)
}
</script>

<style lang="scss" scoped>
ul {
    list-style: none;
}
</style>